<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商品规格</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>

    <style type="text/css">
        body {
            font-size: 14px;

        }

        .tips {
            font-size: 12px;
            color: #a2a2a2;
        }

        /*商品规格选择，有带勾号的*/
        .format {
            padding: 0 10px;
        }

        .format li:after {
            border-radius: 5px;
        }

        .format li.active {
            color: #327afa;
        }

        .format li.active:after {
            border-color: #327afa;
        }

        .format li.active:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-right: 22px solid #327afa;
            border-top: 15px solid transparent;
            bottom: 0;
            right: 0;
        }

        .format li {
            width: 30%;
            float: left;
            text-align: center;
            border-radius: 8px;
            padding: 5px 0;
            margin-bottom: 12px;
        }

        .format li i {
            display: none;
        }

        .format li.active i {
            display: block;
        }

        .format li:nth-of-type(3n+2), .format li:nth-of-type(3n+1) {
            margin-right: 5%;
        }

        .format .aui-iconfont {
            position: absolute;
            color: #fff !important;
            right: 1px;
            bottom: -4px;
            font-size: 12px !important;
        }

        .addAttr {
            padding: 0 10px;
        }

        .addAttr li {
            width: 30%;
            float: left;
            text-align: center;
            border-radius: 8px;
            padding: 5px 0;
        }

        .aui-icon-add {
            color: #000 !important;
        }

        .addMark {
            margin-right: 5px;
        }

        /*自定义可以删除的*/
        .deleIcon:before {
            content: "-";
            color: #fff;
            position: absolute;
            right: -3px;
            top: -5px;
            font-weight: bolder;
            height: 16px;
            width: 16px;
            border-radius: 50%;
            background: #327afa;
            font-size: 18px;
            line-height: 16px;
            text-align: center;
            z-index: 9;
        }

        .customAttr {

        }

        li.customAttr {
            color: #327afa;
        }

        li.customAttr:after {
            border-color: #327afa;
        }

        .pickerToTop {
            position: absolute;
            bottom: 0;
            /*-webkit-transform: translateY(100%);*/
            /*height:50%;*/
            /*overflow-y:auto; */
            /*-webkit-transition:  .5s;
            transition:  .5s;*/
            z-index: 999;
            width: 100%;
            display: none;
        }

        .toTopAnimate {
            display: block;
        }

        .cancel {
            background: #d7e5ff !important;
            border-color: #d7e5ff !important;
            color: #327afa !important;
            width: 50%;
            float: left;
        }

        .confirm {
            width: 50%;
            float: left;
        }
        .format{
            padding-top: 10px;
        }
    </style>
</head>
<body>

<ul class="format colorFormat">
    <!--<li class="aui-border" tapmode onclick="changeCheck(this)">-->
        <!--<i class="aui-iconfont aui-icon-check"></i>白色-->
    <!--</li>-->
</ul>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/myInfo.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script type="text/javascript" src="../../script/echo.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">
        var categorys = "",categoryIds=",";//颜色和大小属性json
    apiready = function () {
        api.parseTapmode();
        var goodsId = api.pageParam.goodsId;
        showData();
    }

    //为了在下面的热门类别可以通用，单独出来
    function changeCheck(obj) {
        if ($(obj).hasClass("active")) {
            $(obj).removeClass("active");
        } else {
            $(obj).addClass("active");
        }
    }
    // 显示遮罩
    function showData() {
        showLoading();
        var data = {
            moduleid: 4
        };
        url = "category/category";
        isLock = true;
        ajaxRequest(url, 'post', data, function (ret, err) {
            if (ret.status == 1) {
                var categoryText = "";
                for (var i = 0; i < ret.msg.length; i++) {
                    categoryText += '<li class="aui-border " dataId="' + ret.msg[i].catid + '" tapmode onclick="changeCheck(this)"><i class="aui-iconfont aui-icon-check"></i>' + ret.msg[i].catname + '</li>';
                }
                $(".format").html(categoryText);
                hideLoading();
            } else {
                hideLoading();
                api.toast({
                    msg: '暂无数据',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });

    }
    //接收来自win的sure方法
    function sure() {
        var hasCategory = false,  colorLen = 0;
        $(".colorFormat").find("li").each(function () {
            if ($(this).hasClass("active") ) {
                hasCategory = true;

                categorys += $(this).text().trim() + ",";
                categoryIds+=$(this).attr("dataId").trim() + ","
            }
        })

        if (hasCategory ) {
            //发送监听
            api.sendEvent({
                name: "hasChoose",
                extra: {
                    categorys: categorys.substr(0,categorys.length-1),
                    categoryIds: categoryIds,
                    type:"category"
                }
            })
            closeWin();
        } else {
            api.toast({
                msg: "请选择主营行业！"
            })
        }
    }

</script>
</html>